<!--
    * Time    : 2021-02-22 09:12:34
    * Author  : zhangTj
    * Desc    : 个人店铺 - 设置页面
-->

<template>
    <div class="w750 bg-fff">
        <div class="font-14">
            <div class="d-flex j-sb a-center bg-fff p-1">
                <span class="">店铺头像</span>
                <div class="d-flex a-center position-relative">
                    <div style="width: 60px; height: 60px">
                        <img v-if="shopInfo.shopAvatar" :src="$imgUrlHead + shopInfo.shopAvatar" alt="" class="w-100 h-100 rounded-5" />
                        <img v-else src="@/assets/images/head-default.png" alt="" class="w-100 h-100 rounded-5" />
                    </div>
                    <span class="iconfont iconArrowRight ml text-999" style="font-size: 12px"></span>
                    <input type="file" name="files" accept="image/*" @change="uploadImg($event)" class="imgUpload" ref="picture" />
                </div>
            </div>
            <div @click="toEdit" class="d-flex j-sb a-center bg-fff p-1 border-top-10bg py-2 border-bottom-10bg">
                <span>店铺名称</span>
                <div>
                    <span>{{ shopInfo.shopName || '该店铺不存在' }}</span>
                    <span v-if="shopInfo.shopNameSupEdit" class="iconfont iconArrowRight ml text-999" style="font-size: 12px"></span>
                </div>
            </div>
            <div class="bg-fff p-1 mt-1" v-if="shopInfo.advertisementDisplay">
                <p>
                    店铺广告
                    <span v-if="shopInfo.advertisementSupEdit">（图片建议尺寸750*300px）</span>
                </p>
                <p v-if="shopInfo.advertisementSupEdit" class="text-999 mt font-12">第一张为首页，拖动可调换位置，最多可添加五张图片</p>
                <div class="mt-1">
                    <template v-if="!isEditBanner">
                        <div v-if="shopInfo.advertisementList && shopInfo.advertisementList.length" class="grid-column3 grid-gap20">
                            <div
                                v-for="(item, index) in shopInfo.advertisementList"
                                :key="item"
                                class="border-dashed"
                                style="width: 2rem; height: 2rem; border-color: #ddd"
                            >
                                <img @click="previewPic(index)" :src="$imgUrlHead + item" alt="" class="w-100 h-100" style="object-fit: contain" />
                            </div>
                        </div>
                        <div v-else>
                            <div class="text-center text-999 flex-center" style="height: 200px">
                                <span>店铺暂无banner图，请上传banner广告图</span>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <drag-upload ref="drag-upload" v-model="shopInfo.advertisementList" :retain="1" />
                    </template>
                </div>
            </div>
        </div>

        <transition-group name="van-slide-up">
            <div
                :key="1"
                v-show="!isEditBanner && shopInfo.advertisementSupEdit && shopInfo.advertisementDisplay"
                class="position-fixed text-fff w-100 font-14 bottom-0 left-0 w-100"
                style="padding: 6px 20px"
            >
                <div class="text-center">
                    <div @click="isEditBanner = true" class="border rounded-20 bg-main" style="padding: 9px 50px">
                        <span>更改店铺广告</span>
                    </div>
                </div>
            </div>
            <div :key="2" v-show="isEditBanner" class="position-fixed text-fff w-100 font-14 bottom-0 left-0 w-100" style="padding: 6px 20px">
                <div v-show="isEditBanner" class="text-center grid-column1 grid-c-20">
                    <div @click="saveBanner" class="border rounded-20 bg-main" style="padding: 7px">
                        <span>保存</span>
                    </div>
                </div>
            </div>
        </transition-group>
    </div>
</template>

<script>
import DragUpload from '@/components/DragUpload/DragUpload'
import uploadFile from 'utils/uploadimg'
import { distributorShopInfo, distributorShopUpdateAvatar, distributorShopUpdateAdvertisement } from '@/api/personal'
import { ImagePreview } from 'vant'

export default {
    name: '',
    components: { DragUpload },
    data() {
        return {
            shopInfo: '', // 店铺数据
            isEditBanner: false // 是否编辑广告
        }
    },
    computed: {},
    watch: {},
    created() {},
    destroyed() {},
    mounted() {
        this.getShopInfo()
    },
    methods: {
        // 店铺数据
        getShopInfo() {
            distributorShopInfo({
                dsId: this.dsId
            })
                .then((res) => {
                    if (!res.success) {
                        this.$toast(res.msg)
                        return
                    }
                    this.shopInfo = res.result
                })
                .catch((err) => {
                    this.$toast(err.msg)
                })
        },

        // 上传头像
        async uploadImg(event) {
            const filesList = event.target.files

            this.$toast.loading({
                message: '上传中...',
                duration: 0
            })
            try {
                let result = await uploadFile(filesList[0])
                if (!result.success) {
                    this.$toast(result.msg)
                    return
                }

                // 修改头像
                distributorShopUpdateAvatar({
                    avatar: result.photos,
                    shopName: this.shopInfo.shopName
                })
                    .then((res) => {
                        if (!res.success) {
                            this.$toast(res.msg)
                            return
                        }
                        this.$set(this.shopInfo, 'shopAvatar', result.photos)
                        this.$toast('修改成功')
                    })
                    .catch((err) => {
                        this.$toast(err.msg)
                    })
            } catch (error) {
                this.$toast(error.msg)
                this.$emit('fail', error)
            }
        },

        // 预览图片
        previewPic(picIndex) {
            ImagePreview({
                images: this.shopInfo.advertisementList.map((item) => this.$imgUrlHead + item),
                startPosition: picIndex
            })
        },

        // 更换广告
        saveBanner() {
            distributorShopUpdateAdvertisement({
                advertisement: JSON.stringify(this.shopInfo.advertisementList)
            })
                .then((res) => {
                    if (!res.success) {
                        this.$toast(res.msg)
                        return
                    }
                    this.$toast('修改成功')
                    this.isEditBanner = false
                    this.getShopInfo()
                })
                .catch((err) => {
                    this.$toast(err.msg)
                })
        },

        // 去编辑名字
        toEdit() {
            if (!this.shopInfo.shopNameSupEdit) {
                return
            }
            this.$toPage('personalEdit')
        }
    }
}
</script>

<style scoped>
.imgUpload {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
}
</style>
